﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery表单验证（不连接数据库）</title>
<script src="../js/jquery.min.js"></script>
<style>
* {
	margin:0;
	padding:0;
}
body {
	font-size:12px;
	padding:50px;
}
.one {
	margin:10px;
}
.one label {
	width:100px;
	float:left;
	text-align:right;
	height:20px;
	line-height:20px;
}
.one input {
	border:1px solid #999;
	height:20px;
}
.two {
	padding-left:110px;
}
.red {
	color:black;
}
.error {
	width:100px;
	height:20px;
	padding:2px;
	line-height:20px;
	background:url(img/err.png)no-repeat;
	padding-left:25px;
	margin-left:5px;
}
.right {
	width:100px;
	height:20px;
	padding:2px;
	line-height:20px;
	background:url(img/ok.png)no-repeat;
	padding-left:25px;
	margin-left:5px;
}
</style>
</head>
<body>
<form action="" name="form" method="post">
    <div class="one">
        <label for="name">用户名:</label>
        <input id="name" type="text" name="name" class="a" value="admin">
        <strong class="red">*</strong>
    </div>
    <div class="one">
        <label for="pass">密码:</label>
        <input type="password" name="pass" class="a" id="pass">
        <strong class="red">*</strong>
    </div>
    <div class="one">
        <label for="passs">确认密码:</label>
        <input type="password" id="passs" name="passs" class="a">
        <strong class="red">*</strong>
    </div>
    <div class="two">
        <input type="submit" id="send" value="注册">
        <input type="reset" id="res" value="重置">
    </div>
</form>

<script>
$(document).ready(function() {
    //blur失去焦点是发生
    $("form :input").blur(function() { //这句话意识是当表单text属性一走是执行
        $(this).parent().find("span").remove(); //要是这条删掉会出很多验证信息
        if ($(this).is("#name")) {
            if (this.value == "") {
                var show = $("<span class='error'>用户名不能为空</span>");
                $(this).parent().append(show); //在用户名后面增加一个节点
            } else if (this.value.length < 3) {
                var show = $("<span class='error'>用户名不能小于3位</span>");
                $(this).parent().append(show);
            } else {
                var show = $("<span class='right'>正确</span>");
                $(this).parent().append(show);
            }
        }
        if ($(this).is("#pass")) {
            if (this.value == "") {
                var show = $("<span class='error'>密码不能为空</span>");
                $(this).parent().append(show);
            } else if (this.value.length < 6) {
                var show = $("<span class='error'>密码不能少于6位</span>");
                $(this).parent().append(show);
            } else {
                var show = $("<span class='right'>正确</span>");
                $(this).parent().append(show);
            }
        }
        if ($(this).is("#passs")) {
            if (this.value == "") {
                var show = $("<span class='error'>确认密码不能为空</span>")
                $(this).parent().append(show);
            } else if (this.value != $("#pass").val()) {
                var show = $("<span class='error'>两次密码不相等</span>");
                $(this).parent().append(show);
            } else {
                var show = $("<span class='right'>正确</span>")
                $(this).parent().append(show);
            }
        }
    });
    $("#send").click(function() {
        $("form :input").trigger("blur");
        if ($(".error").length) {
            return false;
        } else {
            alert("注册成功");
        }
    });
    $("#res").click(function() {
        $("span").remove();
    });

});
</script>

</body>
</html>
